/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

/**
 * 财务管理-退款审核
 */
import React, { useState, useMemo } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import { connect } from 'umi';
import { usePageTabsChange } from '@/utils/hooks/pageTabs';
import type { ConnectState } from '@/models/connect';
import KbRefundReview from '@/components/_pages/Finance/refundReview/components/refund-review/index';
import { Tabs } from 'antd';

interface IndexType {
  winSize: string;
}

const Index = (props: IndexType) => {
  const { winSize } = props;
  const [show] = usePageTabsChange();

  const [activeKey, setActiveKey] = useState<string>('0');
  const screenSize = useMemo(() => ['xs', 'sm'].includes(winSize), [winSize]);

  const items: any[] = useMemo(
    () => [
      {
        label: '待审核',
        key: '0',
        children: <KbRefundReview status='0' show={activeKey === '0' && show} />,
      },
      {
        label: '已通过',
        key: '1',
        children: <KbRefundReview status='1' show={activeKey === '1' && show} />,
      },
      {
        label: '已拒绝',
        key: '2',
        children: <KbRefundReview status='2' show={activeKey === '2' && show} />,
      },
    ],
    [activeKey, screenSize, show],
  );

  const handleTabChange = (current: string) => {
    setActiveKey(current);
  };

  return (
    <PageContainer>
      <Tabs items={items} onChange={handleTabChange} activeKey={activeKey} />
    </PageContainer>
  );
};

export default connect(({ global }: ConnectState) => ({
  winSize: global.winSize || '',
}))(React.memo(Index));
